<template>
  <div style="margin-top: 20px" class="CManageClass">
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="已完结" name="2">
        <div>
          <div class="course_div" v-for="item in courseData" :key="item.courseId">
            <div class="el-col-6 course_image_div">
              <el-image
                style="width: 100%;height: 100%"
                :src="item.imageUrl"
                fit="contain">
              </el-image>
            </div>
            <div class="el-col-18 course_detail_div">
              <div class="course_title">
                <span>{{item.title}}</span>
              </div>
              <div class="course_detail">
                <div class="el-col-12">
                  学习人数：
                  <span>{{item.number}}</span>
                </div>
                <div class="el-col-12">
                  <span>评分：</span>

                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">评分人数：{{item.rateNumber}}人 </div>
                    <el-rate style="display: inline-block"
                      v-model="item.overallRate"
                      disabled
                      show-score
                      text-color="#ff9900"
                      :score-template="item.overallRate.toString()">
                    </el-rate>
                  </el-tooltip>
                </div>
              </div>
              <div class="course_divider" >
                <el-divider></el-divider>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :hide-on-single-page="true"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="连载中" name="1">
        <div>
          <div class="course_div" v-for="item in courseData" :key="item.courseId">
            <div class="el-col-6 course_image_div">
              <el-image
                style="width: 100%;height: 100%"
                :src="item.imageUrl"
                fit="contain">
              </el-image>
            </div>
            <div class="el-col-18 course_detail_div">
              <div class="course_title">
                <span>{{item.title}}</span>
              </div>
              <div class="course_detail">
                <div class="el-col-12">
                  学习人数：
                  <span>{{item.number}}</span>
                </div>
                <div class="el-col-12">
                  <span>评分：</span>

                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">评分人数：{{item.rateNumber}}人 </div>
                    <el-rate style="display: inline-block"
                             v-model="item.overallRate"
                             :max = 5
                             disabled
                             show-score
                             text-color="#ff9900"
                             :score-template="item.overallRate.toString()">
                    </el-rate>
                  </el-tooltip>
                </div>
                <div >
                  <div class="el-col-12" style="padding: 30px 0px 0px 0px">
                    最后更新时间：
                    <span>2020/02/11 18:12:50</span>
                  </div>
                  <div class="el-col-12" :offset="12" style="padding: 10px 0px;text-align: right">

                    <el-tooltip class="item" effect="dark" content="更新章节" placement="bottom">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop="uploadCS(item.courseId)"></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="course_divider" >
                <el-divider></el-divider>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :hide-on-single-page="true"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="未发布" name="0">
        <div class="noDiv">
          <div class="course_div" v-for="item in courseData" :key="item.courseId">
            <div class="el-col-6 course_image_div">
              <el-image
                style="width: 100%;height: 100%"
                :src="item.imageUrl"
                fit="contain">
              </el-image>
            </div>
            <div class="el-col-18 course_detail_div">
              <div class="course_title">
                <span>{{item.title}}</span>
              </div>
              <div class="course_detail">
                <div class="el-col-12">
                  学习人数：
                  <span>{{item.number}}</span>
                </div>
                <div class="el-col-12">
                  <span>评分：</span>
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">评分人数：{{item.rateNumber}}人 </div>
                    <el-rate style="display: inline-block"
                             v-model="item.overallRate"
                             :max = 5
                             disabled
                             show-score
                             text-color="#ff9900"
                             :score-template="item.overallRate.toString()">
                    </el-rate>
                  </el-tooltip>
                </div>
                <div >
                  <div class="el-col-10" style="padding: 30px 0px 0px 0px">
                    最后更新时间：
                    <span>2020/02/11 18:12:50</span>
                  </div>
                  <div class="el-col-4" style="padding: 30px 0px 0px 0px">
                  </div>
                  <div class="el-col-10" :offset="12" style="padding: 10px 0px;text-align: right">

                    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                      <el-button type="danger" icon="el-icon-delete" circle @click.stop="deleteCourse(item.courseId)"></el-button>
                    </el-tooltip>

                    <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                      <el-button type="primary" icon="el-icon-edit" circle @click.stop="uploadCS(item.courseId)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="发布" placement="bottom">
                      <el-button type="success" icon="el-icon-s-promotion" circle></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="course_divider">
                <el-divider></el-divider>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :hide-on-single-page="true"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'CManageClass',
  data () {
    return {
      activeName: '2',
      value: 4.5,
      courseData: '',
      total: 0,
      pageSize: 10
    }
  },
  mounted () {
    this.getCourseByTId(this.activeName)
    this.getPageCourse(this.activeName, 1, 2, this.pageSize)
  },
  methods: {
    // 标签点击
    handleClick (tab, event) {
      this.getCourseByTId(tab.name)
      // eslint-disable-next-line eqeqeq
      if (tab.name == 0) {
        this.getPageCourse(tab.name, 1, 0, this.pageSize)
      } else {
        this.getPageCourse(tab.name, 1, 2, this.pageSize)
      }
    },
    // 统计数量
    getCourseByTId (state) {
      var _this = this
      var userId = this.$store.state.user.userId
      var course = {
        userId: userId,
        state: state
      }
      this.$axios.post('/api/course/getCourseByTId',
        this.$qs.stringify({
          courseParam: JSON.stringify(course)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.total = result.result.length
          }
        })
    },
    // 获取课程
    getPageCourse (state, page, reviewState, pageSize) {
      var _this = this
      var userId = this.$store.state.user.userId
      var courseParam = {
        userId: userId,
        state: state,
        page: page,
        pageSize: pageSize,
        reviewState: reviewState
      }
      this.$axios.post('/api/course/getCourseByTId',
        this.$qs.stringify({
          courseParam: JSON.stringify(courseParam)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.courseData = result.result
          }
        })
    },
    // 下方分页点击
    handleCurrentChange (page) {
      this.getPageCourse(this.activeName, page, 2, this.pageSize)
    },
    // 跳转课程更新页
    uploadCS (courseId) {
      // 上传章节
      this.$router.push(
        {path: '/courseManageMain',
          query: {
            courseId: courseId,
            path: this.$route.fullPath
          }
        }
      )
    },
    // 删除课程
    deleteCourse (courseId) {
      var _this = this
      this.$confirm('此操作将永久删除该该课程, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$axios.post('/api/course/deleteCourseById',
          _this.$qs.stringify({
            'courseId': courseId
          })
        )
          .then(function (response) {
            var result = response.data
            if (result.isSuccess) {
              _this.getPageCourse(0, 1, 2, _this.pageSize)
              _this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style>
  .CManageClass .course_div{
    padding: 5px;
    height: 120px;
    width: 100%;
  }
  .course_image_div {
    width: 180px;
    height: 120px;
    overflow: hidden
  }
  .course_detail_div{
    height:120px;
    text-align: left;
    padding-left: 20px
  }
.course_title{
  padding: 5px 0px;
  font-size: 20px;
  font-weight: bolder;
}
  .course_detail{
    font-size: 15px;
    color: #787d82;
  }
  .course_divider{
    position: relative;
    top: 60px;
  }
  .pagination {
    margin-top: 20px;
  }
</style>
